<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>看板</title>
    
    <style>  
      
    body {  width:1620px;  font-family: '宋体', 'Lucida sans', Arial; font-size: 20px;  background-image:url('bg.png'); background-repeat:no-repeat;  background-size:auto 100%;  color:#3b5fcc      ; }
    table {*border-collapse: collapse; /* IE7 and lower */    border-spacing: 0;  width: 100%;    margin-top: 5px ;    }  
    thead{ color:#2478aa; }
    tbody{ color:#2478aa; }
    .bordered {     border: solid #436eee 1px;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;   border-radius: 6px;    -webkit-box-shadow: 0 1px 1px #436eee;    -moz-box-shadow: 0 1px 1px #436eee;   box-shadow: 0 1px 1px #436eee;  }  
    .bordered tr:hover {    background: #555;   -o-transition: all 0.1s ease-in-out;   -webkit-transition: all 0.1s ease-in-out;    -moz-transition: all 0.1s ease-in-out;    -ms-transition: all 0.1s ease-in-out;   transition: all 0.1s ease-in-out;   }  
    .bordered td, .bordered th {  /*   border-left: 1px solid #ccc;   border-top: 1px solid #ccc;    */ padding: 10px;   text-align: left;   }  
    .bordered th {    background-color: #dce9f9;background-image: -webkit-gradient(linear, left top, left bottom, from(#042030), to(#05556d)); background-image: -webkit-linear-gradient(top, #042030, #05556d);  background-image: -moz-linear-gradient(top, #042030, #05556d); background-image: -ms-linear-gradient(top, #042030, #05556d); background-image: -o-linear-gradient(top, #042030, #05556d);  background-image: linear-gradient(top, #042030, #05556d);  -webkit-box-shadow: 0 1px 0 #436eee inset; -moz-box-shadow:0 1px 0 #436eee inset; box-shadow: 0 1px 0 #436eee inset;border-top: none;/*text-shadow: 0 1px 0 rgba(255,255,255,.5);*/}  
    .bordered td:first-child, .bordered th:first-child {   border-left: none;  }  
    .bordered th:first-child {  -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0;  }  
    .bordered th:last-child {   -moz-border-radius: 0 6px 0 0;    -webkit-border-radius: 0 6px 0 0;   border-radius: 0 6px 0 0;  }  
    .bordered th:only-child{   -moz-border-radius: 6px 6px 0 0;   -webkit-border-radius: 6px 6px 0 0;   border-radius: 6px 6px 0 0;   }  
    .bordered tr:last-child td:first-child {   -moz-border-radius: 0 0 0 6px;    -webkit-border-radius: 0 0 0 6px;  border-radius: 0 0 0 6px;   } 
    .bordered tr:last-child td:last-child {   -moz-border-radius: 0 0 6px 0;   -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0;   }  
     #divCenter {    background-image:url('center.png');       background-repeat:no-repeat;  background-size:100% 100%;     color:#3b5fcc      ; }  
     
     .origin{position: relative;}
    
  </style>
    <script src="bi/echarts.min.js"></script>
        <script >
             
        var serverUrl="http://127.0.0.1:12138"
        var server_token=""
          var xmlHttpReg = null; 
          if (window.ActiveXObject) {//如果是IE
              xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
          } else if (window.XMLHttpRequest) {
              xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
          }
        function sendAjax() {
                     
        new Promise((resolve, reject) => {
            if(requestArray.length==0||xmlHttpRegWorking){
                  resolve();
                  return ;
            }
                    
            var request=requestArray[0];
            this.requestArray.shift();
            if(!request.once){
                    this.requestArray.push(request);
            }
           var url=request.url;
           if(url.substring(0,4)!="http"){
                  url=serverUrl+url
           }
           
           //测试
            if( request.errFun){
                    request.errFun()
                   resolve();
                   return;
            }
                          
           
            xmlHttpReg.open("GET", url);
            xmlHttpReg.send();
            xmlHttpReg.onreadystatechange = () => {
                if (xmlHttpReg.readyState == 4) {
                    if (xmlHttpReg.status == 200) {
                        console.log('获取数据成功');
                        let data = JSON.parse(xmlHttpReg.response);
                        request.fun(data)
                        resolve();
                    } else {
                            if( request.errFun){
                                 request.errFun()
                            }
                            resolve();
                    }
                }
                
                if(xmlHttpReg.status == 0||xmlHttpReg.status == 404 ){
                    if( request.errFun){
                         request.errFun()
                    }
                    resolve()
               }              
            }
        }).then(resolve => {
                 setTimeout(sendAjax, 2000/requestArray.length);
        }).catch(err => {
                setTimeout(sendAjax, 2000/requestArray.length);
        })
     }
 
         
  
  
  
  
        this.requestArray=[];
        var xmlHttpRegWorking=false;

        sendAjax() 

        function clickAjax(url,fun){
             this.requestArray.unshift({url:url,fun:fun,once:true });            
        }
</script>
  </head>
  <body style="position: relative;">
          <h1 align="center" style="font-size:40px;color:#000"> 智能仓库管理系统看板</h1>
     
               <div id="yiBiaoPan" style="width:400px;height:300px;position: absolute;right:30px"></div>
              
                  <div id="main1" style="width:400px;height:200px;position: absolute;top:350px;left:1200px"></div>
                  <div id="main" style="width:400px;height:200px;position: absolute;right:0px;top:530px;"></div> 
                  <div id="itemOrder" style="width:400px;height:750px;position: absolute;left:10px;top:70px"></div>
                  <div id="divCenter" style="width:750px;height:300px; margin: 0 auto;">
                        <div style="padding-top:100px;">
                             <div align="center"  id="allCount" style="font-size:60px;letter-spacing:24px;font-weight:900"> 4574</div> 
                             <h2 align="center" style="font-size:20px;color:#2d55cd;letter-spacing:14px"> 累计进出库总计</h2>
                        </div>
                  </div>
                  <div   style="width:750px;height:230px; margin: 0 auto;"> 
                            <table class="bordered">  
                                    <thead> 
                                        <tr>   
                                            <th>名称</th>  
                                            <th>编号</th> 
                                            <th>位置</th>   
                                            <th>时间</th>  
                                        </tr>  
                                    </thead> 
                                    <tbody id="tbodyId" style="font-size:12px" > 
                                    </tbody> 
                          </table>  
                  </div>
                  <div id="cid"  style="width:750px;   margin: 0 auto;"> 
                 <canvas id="canvas"  style="width:750px;"></canvas> 
  </div>
</body>
<script type="text/javascript">
      var yiBiaoPanObj = echarts.init(document.getElementById('yiBiaoPan'));
      const yiBiaoPanData = [{
            value: 10,
            name: '设备区',
            title: {offsetCenter: ['-30%', '74%']},
            detail: { offsetCenter: ['-30%', '98%']}
          }, {
            value: 60,
            name: '报废区',
            title: {offsetCenter: ['30%', '75%']},
            detail: {offsetCenter: ['30%', '98%']}
          }];
        var yiBiaoPanOption = {series: [ {
              type: 'gauge',
              pointer: {width: 4,length: '80%',offsetCenter: [0, '10%']},
              anchor: { show: true, showAbove: true, size: 15, itemStyle: {borderWidth: 4 }},
              progress: {show: true, overlap: true,roundCap: true},
              axisLine: { roundCap:true },
              data: yiBiaoPanData,
              title: {fontSize: 14 },
              detail: {width: 38, height: 10,fontSize: 10, color: '#fff', backgroundColor: 'auto', borderRadius: 3, formatter: '{value}%'}
            }]};
         yiBiaoPanObj.setOption(yiBiaoPanOption);
         
         function updateYiBiaoPan(){
                  var v1=Math.floor(Math.random()*100)
                 yiBiaoPanData[0].value=v1;
                      yiBiaoPanData[1].value=100-v1;
              
                    yiBiaoPanObj.setOption({series: [ { type: 'gauge', data:yiBiaoPanData } ]})
             }
        </script>
        <script type="text/javascript">
            const itemOrderData = [];
            for (let i = 0; i < 9; ++i) {
              itemOrderData.push(Math.round(Math.random() * 200));
            }
            var itemOrderChart = echarts.init( document.getElementById('itemOrder')); 
            itemOrderChart.setOption({
              xAxis: { max: 'dataMax' },
              yAxis: {  type: 'category',
                data: ['华为', '联想', 'ibm', '苹果', '神州',"华硕","戴尔",'威联','研华'],
                inverse: true,  animationDuration: 300, animationDurationUpdate: 300,  max: 8// only the largest 9 bars will be displayed
              },
              series: [{
                  realtimeSort: true,
                  name: '在库库存信息',
                  type: 'bar',
                  data: itemOrderData,
                  label: {show: true,precision:1,position:'right', valueAnimation:false,fontFamily:'serif', fontStyle:'normal',color:'#3b5fcc',fontSize:15}
                }
              ],
              legend: { show: true },
              animationDuration: 0,
              animationDurationUpdate: 2000,
              animationEasing: 'linear',
              animationEasingUpdate: 'linear'
            });
            function updateItmeBarData() {
              for (var i = 0; i < itemOrderData.length; ++i) {
                if (Math.random() > 0.9) {
                  itemOrderData[i] += Math.round(Math.random() * 2000);
                } else {
                  itemOrderData[i] += Math.round(Math.random() * 200);
                }
              }
              itemOrderChart.setOption({  series: [  {  type: 'bar',  data:itemOrderData } ]  });
            }

              updateItmeBarData();
              var allCount=1000;

            setInterval(function () {
                 updateItmeBarData();
                 updateYiBiaoPan();
               document.getElementById("allCount").innerHTML=allCount++;
            }, 3000);
                   
      </script>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
       const workAllTime = [];
       var option1 = {
                      legend: {show: true,  top: "6%",  itemGap:400,  data: [  'wcs总时间']  },
                      tooltip: { trigger: 'item',  formatter: ' {b}<br/>  {c}{a} ({d}%)' },
                      series: [ {
                          name: 'wcs总时间',  type: 'pie',  radius: '75%',  center: ['50%', '50%'], data: workAllTime,  minAngle: 1,
                          emphasis: {itemStyle: {  shadowBlur: 3,  shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'} },
                          tooltip: {   formatter: ' {b}<br/>  {c}{a} ms({d}%)'  },
                      }]
                    };
       myChart.setOption(option1);
      
       var chart1Requst= {url:"http://127.0.0.1:12138/open/task",fun:function(d){
             workAllTime .length = 0;
             for (var i = 0; i < d.data.length; i++) { 
                    workAllTime.push({  name: stat.className,  value:  d.data[i].workAllTime}); 
             } 
             myChart.setOption({ series: [  {  data: workAllTime } ] });
         },errFun:function(){
              var errorPieData=[
                      {name: "数据1",  value: Math.floor(Math.random()*100)},
                      {name: "数据2",  value: Math.floor(Math.random()*100)},
                      {name: "数据3",  value: Math.floor(Math.random()*100)},
                      {name: "数据4",  value: Math.floor(Math.random()*100)},
                      {name: "数据5",  value: Math.floor(Math.random()*100)}
              ];
              myChart.setOption({series:[{data: errorPieData }]});
         
         }}
        var myChart1 = echarts.init(document.getElementById('main1'));  
        function randomData(v,vMe) {
            vMe=Math.floor(vMe * 100) / 100
            v=Math.floor(v * 100) / 100
          now = new Date(+now + oneDay);
           dataAll.push( {
            name: now.toString(),
            value: [
              [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),v
            ]
          });
          dataMe.push( {
            name: now.toString(),
            value: [
              [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),vMe
            ]
          });
          
        }
        let dataAll = [];
        let dataMe = [];
        let now = new Date(1997, 9, 3);
        let oneDay = 24 * 3600 * 1000;

        for (var i = 0; i < 100; i++) {
         randomData(0,0);
        }
         


         myChart1.setOption({
                 title: {  text: '服务器使用率',  left:"center" },
              tooltip: {  trigger: 'axis',  formatter: function (params) {
                      var value1 = params[0].value;
                      var value2 = params[1].value;
                      var date = new Date(params.name);
                      return  "cpu："+ value2[1] + ' ；wcs： ' + value1[1] ;
                    },
                    axisPointer: {  animation: false  }
              },
              xAxis: { type: 'time',show: false, splitLine: { show: false }},
              yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: true }},
              series: [{name: 'cpume', type: 'line',showSymbol: false,data: dataMe}, { name: 'cpuAll', type: 'line', showSymbol: false, data: dataAll }]
            });



    var chart2Requst= {url:"http://127.0.0.1:12138/Carrier/cpu",fun:function(dd){
            dataAll.shift();
            dataMe.shift();
            randomData( Math.random()*100,  Math.random()*100);
                myChart1.setOption({ series: [ {  data: dataMe  },{  data: dataAll  } ] });
              
        },errFun:function(){
                dataAll.shift();
            dataMe.shift(); 
            randomData( Math.random()*100,  Math.random()*100);
                myChart1.setOption({  series: [  {  data: dataMe },{ data: dataAll}]});
        }}
    
        var chart3Requst= {url:"http://127.0.0.1:12138/api/welcome/lastData",fun:function(dd){
           var data=dd.data;
           var str=""
           for(var i=0;i<data.length;i++){
                   str+="<tr>"  
                  str+=addTd(data[i].itemCode);
                    str+=addTd(data[i].barCode);
                    str+=addTd(data[i].rLocId);
                  str+=addTd(data[i].changeTime);
                    str+="</tr>"
               }
              document.getElementById('tbodyId').innerHTML=str;
        },errFun:function(){
                var str="<tr><td>配网中43间金具规格@配网中43间金具</td><td>1000000001</td><td>0</td><td>2023-11-24 15:19:23</td></tr>"
                +"<tr><td>配网中43间金具规格@配网中43间金具</td><td>10000028</td><td>0</td><td>2023-11-24 11:59:45</td></tr>"
                +"<tr><td>配网中43间金具规格@配网中43间金具</td><td>10000029</td><td>0</td><td>2023-11-24 11:59:45</td></tr>"
                +"<tr><td>配网中43间金具规格@配网中43间金具</td><td>10000030</td><td>0</td><td>2023-11-24 11:59:45</td></tr>"
                +"<tr><td>配网中43间金具规格@配网中43间金具</td><td>10000031</td><td>0</td><td>2023-11-24 11:59:45</td></tr>" 
                 document.getElementById('tbodyId').innerHTML=str;
            
        }}
        
        function addTd(text){
            return "<td>"+text+"</td>"
        }
        this.requestArray.push(chart3Requst);
        this.requestArray.push(chart1Requst);
        this.requestArray.push(chart2Requst);
    </script>
     
<script   lang="utf-8">
    extend =  function(sb, sp){
            sb.prototype=new sp();
            sb.prototype.constructor=sb;
            return sb;
    };
    Graph =extend(function (){
            this.init= function (cfg){
                this.className=this.constructor.name;
                this.config={};
                this.copy(cfg,this.config);
            } 
             this.copy=function(from,to){
                         if(from){
                                         for(var i in from){
                                                 to[i]=from[i];
                                     }
                         }
             }
             this.getAnchor= function (){
                 return {x:this.x,y:this.y}
             }
             this.setAnchor=function (point){
                 this.move(point.x-this.x,point.y-    this.y)
                 this.x=point.x;
                 this.y=point.y;
             }
 
    },Object); 
 
    SimpleGraph = extend(function SimpleGraph(cfg){
          this.init=function (){
              SimpleGraph.prototype.init.apply(this,arguments)
         }
         this.init(cfg);
             this.toRight=function(x){
                 this.x1+=x;
                 this.x2+=x;
                 this.x+=x;
             }
             this.toLeft=function(x){
                 this.x1-=x;
                 this.x2-=x;
                 this.x-=x;
             }
             this.toUp=function(y){
                 this.y1-=y;
                 this.y2-=y;
                 this.y-=y;
             }
             this.toDown=function(y){
                 this.y1+=y;
                 this.y2+=y;
                 this.y+=y;
             }
             this.move=function(x,y){
                 this.x+=x;
                 this.y+=y;
               this.x1+=x;
                 this.x2+=x;
               this.y1+=y;
                 this.y2+=y;
             }
             this.moveTo=function(x,y){
                 var defx=this.x1-this.x
                 var defy=this.y1-this.y
                 this.x1=x+defx;
                 this.x2=x+defx;
                 this.y1=y+defy;
                 this.y2=y+defy;
                 this.x=x;
                 this.y=y;
             }
             
     },Graph);
 
    ComplexGraph = extend(function (cfg){
         this.init=function (){
            ComplexGraph.prototype.init.apply(this,arguments)
            this.graphs=[];
         }
         this.init(cfg);
         this.toRight=function(x){
             for(var index in this.graphs){
                 this.graphs[index].toRight(x);
             }
        }
        this.toLeft=function(x){
             for(var graph in this.graphs){
                  this.graphs[index].toLeft(x);
             }
        }
        this.toUp=function(y){
            for(var index in this.graphs){
                 this.graphs[index].toUp(y);
            }
        }
        this.toDown=function(y){
            for(var index in this.graphs){
                 this.graphs[index].toDown(y);
            }
        }
        this.move=function(x,y){
            this.x+=x;
            this.y+=y;
            for(var index in this.graphs){
                 this.graphs[index].move(x,y);
            }
        }
        this.moveTo=function(x,y){
            this.x=x;
            this.y=y;
            for(var index in this.graphs){
                this.graphs[index].moveTo(x,y);
            }
        }
        this.draw=function(){
          for(var index in this.graphs){
              this.graphs[index].draw();
          }
        }
    } ,Graph);
 
 //context,x1,y1,x2,y2,width
    Line =  extend(function (cfg){
        this.init=function (){
            Line.prototype.init.apply(this,arguments)
            this.lineWidth=cfg.width|1;
            this.x1=cfg.x1;
            this.y1=cfg.y1;
            this.x2=cfg.x2;
            this.y2=cfg.y2;   
            this.x=(cfg.x1+cfg.x2)/2;
            this.y=(cfg.y1+cfg.y2)/2;
            this.cxt=cfg.context;
            this.strokeStyle=cfg.strokeStyle;
         }
 
          this.init(cfg);
             
          this.draw=function(){
                this.cxt.strokeStyle = this.strokeStyle||"rgba(0,0,0,0)";
                if(!this.cxt){
                    this.cxt.beginPath();
                }
                this.cxt.beginPath();
                this.cxt.lineWidth =this.lineWidth;
                this.cxt.moveTo(this.x1,this.y1);
                this.cxt.lineTo(this.x2,this.y2);
                this.cxt.stroke();
          }
   },SimpleGraph)
    Word =  extend(function (cfg){
         this.init=function (){
              Line.prototype.init.apply(this,arguments)
                this.lineWidth=cfg.width|1;
                this.x=cfg.x;
                this.y=cfg.y;
                this.cxt=cfg.context;
                this.word=cfg.word;
                this.fillStyle=cfg.fillStyle
                this.font=cfg.font;
         }
         this.init(cfg);
         
        this.draw=function(){
            this.cxt.beginPath();
            if(this.fillStyle){
                   this.cxt.fillStyle=this.fillStyle;
            }
            var beforeFont=this.cxt.font
            if(this.font){
                   this.cxt.font=this.font;
            }
            this.cxt.fillText(this.word, this.x, this.y);
            this.cxt.font=beforeFont;
        }
    },SimpleGraph)
    
   
    Rectangle= extend( function (context,x1,y1,x2,y2,width,strokeStyle,fillStyle){
         this.init=function (){
              Rectangle.prototype.init.apply(this,arguments)
              this.fillStyle= fillStyle
              this.strokeStyle=strokeStyle;
              this.lineWidth=width|1;
              this.cxt=context;
              this.x1=x1;
              this.y1=y1;
              this.x2=x2;
              this.y2=y2;
              this.x=(x1+x2)/2;
              this.y=(y1+y2)/2;
         }
         this.init();
         this.draw=function(){
                this.cxt.fillStyle=this.fillStyle
                this.cxt.strokeStyle=this.strokeStyle
                this.cxt.beginPath();
                this.cxt.lineWidth =this.lineWidth;
                this.cxt.moveTo(this.x1,this.y1)
                this.cxt.lineTo(this.x2,this.y1)
                this.cxt.lineTo(this.x2,this.y2)
                this.cxt.lineTo(this.x1,this.y2)
                this.cxt.lineTo(this.x1,this.y1)
                this.cxt.stroke();
                this.cxt.closePath();
                if(this.fillStyle)
                context.fill();
         }
    },SimpleGraph)
    Rect= extend( function (cfg){
        this.init=function (){
          Rect.prototype.init.apply(this,arguments)
          this.fillStyle= cfg.fillStyle 
          this.lineWidth=cfg.width|1;
          this.cxt=cfg.context;
          this.x=cfg.x;
          this.y=cfg.y;
          this.width=cfg.width;
          this.height=cfg.height;
         
       }
        this.init(cfg);
        this.draw=function(){
            if(this.fillStyle){
                this.cxt.fillStyle=this.fillStyle;
            }
            this.cxt.fillRect(this.x,this.y,this.width,this.height);
            this.cxt.fill();
         }
     
    },SimpleGraph);
    Point= extend( function (cfg){
          this.init=function (){
                Point.prototype.init.apply(this,arguments)
                this.fillStyle= cfg.fillStyle 
                this.cxt=cfg.context;
                this.x=cfg.x;
                this.y=cfg.y;
          }
          this.init(cfg);
          this.draw=function(){
                var context = this.cxt;
                context.fillStyle = this.fillStyle;
                context.beginPath();
                context.arc(this.x,this.y,3,0,Math.PI*2);
                context.fill();
           }
     
    },SimpleGraph)

    Store= extend( function (context,x,y,width,height,forword){
         this.init=function (){
              Store.prototype.init.apply(this,arguments)
              this.lineWidth=1;
              this.cxt=context;
              this.x1=x-width/2;
              this.y1=y-height/2;
              this.x2=x+width/2;
              this.y2=y+height/2;
              this.x=x;
              this.y=y;
              this.rectangle1=new Rectangle(context,this.x1,this.y1,this.x2,this.y2,2,"#00f","#eee");
             this.graphs.push(this.rectangle1);
             
         }
      this.init();
     },ComplexGraph)
     Crane=  extend(  function (context,x,y,stockSize){
          this.init=function (){
              Crane.prototype.init.apply(this,arguments)
              this.xv=0//水平速度
              this.xa=0//水平加速度
              stockSize=(stockSize||17)*1.2
              this.width=stockSize;
              this.len = 43*stockSize/17;
              this.x1=x-this.len/2;
              this.y1=y-this.width/2;
              this.x2=x+this.len/2;
              this.y2=y+this.width/2;
              this.x=x;
              this.y=y;
            }
            
            this.draw=function(){
                Crane.prototype.draw.apply(this,arguments)
                context.drawImage(cranePic,this.x-this.len/2,this.y-this.width/2,this.len,this.width)
            }

            this.init();
    },ComplexGraph);
      Product= extend( function (context,x,y,size){
             this.init=function (){
                
              Product.prototype.init.apply(this,arguments)
              this.width=parseInt(size)||16;
              this.len=parseInt(size)||16;
              this.x1=x-this.width/2;
              this.y1=y-this.len/2;
              this.x2=x+this.width/2;
              this.y2=y+this.len/2;
              this.x=x;
                 this.y=y;
              this.graphs.push(new   Rectangle(context,this.x1,this.y1,this.x2,this.y2,1,"#ff00ff","#ff00ff"));
              }
            this.init();
       
            this.draw=function(){
                  context.drawImage(productPic,this.x-this.len/2+1,this.y-this.width/2+1,this.len-2,this.width-2)
            }
       
      },ComplexGraph);
      
    
      
     StockProduct= extend( function (context,color){
        this.init=function (){
              StockProduct.prototype.init.apply(this,arguments)
              this.width=10;
              var x=y=0
              this.len=6;
              this.x1=x-this.width/2;
              this.y1=y-this.len/2;
              this.x2=x+this.width/2;
              this.y2=y+this.len/2;
              this.x=x;
              this.y=y;
              this.graphs.push(new   Rectangle(context,this.x1,this.y1,this.x2,this.y2,1,color,color));
       }
       this.init();
    },ComplexGraph);
      
           
      StoreRoom=  extend( function (context,config ){
           config=config||{}
           
           this.more=[10101,10102,10103,10104,10105,10201,10202,10203,10204,10205]
           this.init=function (){
                 StoreRoom.prototype.init.apply(this,arguments)
                 this.stores={};
                 this.x1=config.x1;
                 this.y1=config.y1;
                 var x2=config.x2;
                 var y2=config.y2;
                 this.x=(this.x1+x2)/2;
                 this.y=(this.y1+y2)/2;
                 var width=x2-this.x1;
                 var height=y2-this.y1;
                 this.cols=config.cols||52
                this.storeWidth=width/this.cols;
                this.beginShelf=config.beginShelf||0;
                this.shelfs=config.shelfs||4
                this.shelfHigth=parseInt((height-20)/this.shelfs);
                this.rows=config.rows||11
                this.storeHigth= this.shelfHigth/(this.rows+1);
                var wordX=this.x1+this.cols*this.storeWidth/2
                for(var shelfId=1;shelfId<=  this.shelfs;shelfId++){
                    var extr=0;
                    if(shelfId>3){
                        extr=20;
                    }else if(shelfId>1){
                        extr=10;
                    }
                    var vallShelfkey=this.beginShelf+ shelfId
                    var keyShelfId =vallShelfkey*10000;
                    for (var col=1;col<= this.cols;col++){
                          var keyRow=keyShelfId+col*100;
                          for(var row=1;row<= this.rows;row++){
                               var key =keyRow+row;
                               var tmpx=this.x1+col*this.storeWidth-this.storeWidth/2;
                               var tmpy=this.y1+(this.rows+1-row)*this.storeHigth+(shelfId-1)*this.shelfHigth+extr;
                              this.addStore(key,tmpx,tmpy);
                          }
                    }
                    var wordY=this.y1+(shelfId)*this.shelfHigth-this.storeHigth+extr
                    var cfg={context:context,word:vallShelfkey,x:wordX,y:wordY,font:'bold '+(this.shelfHigth)+'px 宋体',fillStyle:'rgba(0,0,0,0.15)'}
                    var word=new Word(cfg);
                    this.graphs.push(word);
                }
           }
           
           this.addStore=function(key,tmpx,tmpy){
               for (i = 0; i < this.more.length; i++) {
                    if(this.more[i]==key){
                        return;
                    }
               }
               var store=new Store(context,tmpx,tmpy,this.storeWidth,this.storeHigth);
              this.graphs.push(store);
              this.stores['k'+key]=store;
                   
           }
            this.init();
            this.getId =function (x,y){
               var col =  x-this.x1;
               col = col/this.storeWidth+1
               col=    Math.round(col)
               if(col<1){
                   return 0;
                   }
               shelf = y-this.y1
               shelfId = shelf/this.shelfHigth+1;
               shelfId=parseInt(shelfId)
               if(shelfId<1){
                   return 0;
                   }
               row= this.rows-(shelf%this.shelfHigth)/this.storeHigth
               row=Math.round(row);
               if(row<1||row> this.rows){
                   return 0;
               }
               shelfId+=    this.beginShelf
               return shelfId*10000+col*100+row;
            }


      } ,ComplexGraph);
    
</script>

<script>
      resList=[];
        var cranePic = new Image();  
    cranePic.src = "bi/png/crane.png";   
    var productPic = new Image();  
    productPic.src = "bi/png/product.png";   
    screenHeight=460 
    screenWidth =window.screen.width
    craneBegin=52;//输送线开始水平位置
    craneEnd=screenWidth-100
    cols=50
    stockSize=13//货位边长

    staticGraph = [];//静态图像
    craneList=[];  

var testTime=0
var info="asdf";

 this.requestArray.push( {url:"http://127.0.0.1:12138/Daping",fun:function(responseText){
            var val=[];    
            val.push(Math.random())
            val.push(Math.random())
            for(var i=0;i<2;i++){
                      crane1=craneList[i]
                        var goalmm=val[i]*(craneEnd-craneBegin)+craneBegin;//目标位置
                        crane1.xGoal=goalmm;
                        var crane1 = craneList[i]
                        var xmm=crane1.getAnchor().x;//当前位置
                      var s=goalmm-xmm
                      var a=(s-crane1.xv)*2
                        crane1.xa=a
                        crane1.xv+=a/60.0;//当前速度
            }
        }, errFun:function(){this.fun();}
  });


   
     function showCrane(){
         for(var i=0;i<craneList.length;i++){
              var crane1=craneList[i]
              var xmm=crane1.getAnchor().x;
              var goal=crane1.xGoal;
              
              if(goal>xmm){//目标在右边
                    crane1.xa=Math.abs(crane1.xa)
                      if(crane1.xv<0){//向左跑
                          crane1.xv+=crane1.xa/10;
                      }
                  
                  }else if(goal<xmm){//目标在左边
                       crane1.xa=-Math.abs(crane1.xa)
                      if(crane1.xv>0){//向右跑
                          crane1.xv+=crane1.xa/10;
                      }
                  }
              
              var x=    crane1.xv/60.0
              if(Math.abs(goal-xmm)<2){
                     crane1.setAnchor({x:crane1.xGoal,y:crane1.y})
              }else{
                       crane1.move(x,0)
              }
              crane1.draw();
        }
        product1.setAnchor(crane1.getAnchor());
        product1.draw();
    }
            
           
    
window.onload = function(){
   
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    canvas.height= screenHeight-20
    canvas.width= screenWidth
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle="#000";
    context.fillRect(0,0,canvas.width,canvas.height);
    context.translate(0.5,0.5);

     storeRoom = new  StoreRoom(context,{shelfs:4,cols:38,rows:2,x1:50,y1:10,x2:canvas.width-100 ,y2:canvas.height-20});
     canvas.onmousemove = function (e) {
                        var location = getLocation(e.clientX, e.clientY);
                        selectId =storeRoom.getId(location.x,location.y);
        };
         for(var i=1;i<3;i++){
                     var y=0;
                     if(i==1){
                          y=115;
                     }else{
                         y=315;    
                     }
                   
                   craneList.push(new Crane(context,(craneBegin+craneEnd)/2,y,stockSize));
              staticGraph.push(new Line({context:context,x1:craneBegin,y1:y,x2:craneEnd,y2:y,width:3,strokeStyle :"rgba(0,0,255,1)"}));
              staticGraph.push(new Line({context:context,x1:craneBegin-30,y1:y,x2:craneBegin,y2:y,width:3,strokeStyle :"rgba(0,0,255,0.2)"}));
              staticGraph.push(new Line({context:context,x1:craneEnd,y1:y,x2:craneEnd+30,y2:y,width:3,strokeStyle :"rgba(0,0,255,0.2)"}));
      }

      product1=new Product(context,1000,170,stockSize);


    //动画循环,绘画执行操作
      (function drawFrame(t){
          window.requestAnimationFrame(drawFrame); 
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillStyle="#eef";
          context.fillRect(0,0,canvas.width,canvas.height);
         
          for(var i=0;i<staticGraph.length;i++){
                staticGraph[i].draw();
          } 
          showCrane();
          storeRoom.draw();
          if(resList&&resList.length>0){
                for(var i=0;i<resList.length;i++){
                    var d = resList[i];
                    addStockProduct(context,storeRoom,d.l,d.s)
                }
          }
    
      }());
    }
    
    function addStockProduct(context,storeRoom,id,status){
        var widthType=2
           var w=storeRoom.storeWidth/9
           var color="#000";
             if(status==1){
                 color="#fa0";
             } else if(status==2){
                 color="#1111ff";
             }else if(status==3){
                 color="#f0f";
             }
           
           var  key=parseInt(id)
         var  index=1
           var stock = new StockProduct(context,color);
           var store = storeRoom.stores['k'+key];
           var anchor = store.getAnchor();
           
           var newAnchor={x:anchor.x,y:anchor.y}
           
           stock.setAnchor(newAnchor)
           stock.draw();
       }
       
    function getLocation(x, y) {
        var bbox = canvas.getBoundingClientRect();
        return {
            x: (x - bbox.left) * (canvas.width / bbox.width),
            y: (y - bbox.top) * (canvas.height / bbox.height)
        };
    }
</script>

<script>
       
   document.oncontextmenu=function(e){
          !e|| e.preventDefault();
           
       if ( document.IsFullScreen ) {
           if (document.exitFullscreen) {
                 document.exitFullscreen();
           } else if (document.msExitFullscreen) {
                 document.msExitFullscreen();
           } else if (document.mozCancelFullScreen) {
                 document.mozCancelFullScreen();
           } else if(document.oRequestFullscreen){
                 document.oCancelFullScreen();
           }else if (document.webkitExitFullscreen){
                  document.webkitExitFullscreen();
           }else{
                var docHtml  = document.documentElement;
                var docBody  = document.body;
                var videobox  = document.getElementById('videobox');
                docHtml.style.cssText = "";
                docBody.style.cssText = "";
                videobox.style.cssText = "";
            }
           document.IsFullScreen = false;
      } else {
             var  element = document.getElementById('canvas');
             if(element.requestFullscreen) {
                    element.requestFullscreen();
             } else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
             } else if(element.msRequestFullscreen){ 
                    element.msRequestFullscreen();  
             } else if(element.oRequestFullscreen){
                    element.oRequestFullscreen();
             }  else if(element.webkitRequestFullscreen){
                    element.webkitRequestFullScreen();
             }else{
                var docHtml  = document.documentElement;
                var docBody  = document.body;
                var videobox  = document.getElementById('videobox');
                var  cssText = 'width:100%;height:100%;overflow:hidden;';
                docHtml.style.cssText = cssText;
                docBody.style.cssText = cssText;
                videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
             }
             document.IsFullScreen = true;
      }
        
   };

</script>

</html>